<template>
	<view class="page">
		<view class="page-bg"></view>
		<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
			<!-- <template v-slot:left>
				<image src="@/static/svg/icon-back.svg" />
			</template> -->
		</uni-nav-bar>
		<view  :style="`height: calc(100vh - ${navBarHeight || 0}px);`">
			<view class="container">
				<image class="logo" src="@/static/image/login-logo.png" />
				<text class="title">火动通告商户端</text>
			</view>
			
			<!-- 登录-账号登录，验证码登录 -->
			<view class="login-page">
				<view class="login-tab flex">
					<view class="tab-dec" :class="{'active':loginType=='password'}" @click="changeType('password')" >
						<image  v-if="loginType=='password'" class="img-left-tab" src="../../static/image/login/left-tab.png"  style="height: 48px;"></image>
						<view>账号登录</view>
					</view>
					<view class="tab-dec" :class="{'active':loginType=='code'}" @click="changeType('code')">
						<image  v-if="loginType=='code'" class="img-right-tab" src="../../static/image/login/right-tab.png"  style="height: 48px;"></image>
						<view>验证码登录</view>
					</view>
				</view>
				<!-- password -->
				<view class="login-dec-page" v-if="loginType=='password'">
					<input type="text" placeholder="用户名" class="tab-name" v-model="mobile">
					<input type="password" placeholder="密码" class="tab-name" v-model="userPass">
				</view>
				<!-- code -->
				<view class="login-dec-page" v-if="loginType=='code'">
					<input type="text" placeholder="手机号" class="tab-name" v-model="mobile">
					<view class="flex justify-between">
						<input type="text" placeholder="验证码" class="code-w" v-model="smsCode">
						<button type="primary"  class="get-code-btn"  @click="getCode" :class="{'unactive':codeTime>0}" :disabled="codeTime>0">{{codeTime>0? codeTime+'s' :'获取验证码'}}</button>
					</view>
				</view>
				<view class="send-btn">
					<button type="primary" class="quick-login-btn" @click="submit">登录</button>
				</view>
				<!-- <view class="" @click="linkapply">
					商户入驻
				</view> -->
			</view>
			<!-- <input type="text" placeholder="邀请码" style="border: 1px solid #eeeeee;height: 40px;background-color: antiquewhite;" v-model="merchantCode">
			<button @click="linkapply">商户入驻</button> -->
		</view>
		<joinPop ref="joinPopRef"></joinPop>
	</view>
</template>

<script setup name="Login">
	import {
		computed,
		onMounted,
		ref,
		watch,
		onBeforeUnmount
	} from 'vue'
	import {
		sendSms,
		loginBySmsCode,
		loginApi
	} from '@/api/auth.js'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import joinPop from './components/joinPop.vue'
	import {
		authCodeApi,
		getWxMobileApi
	} from '@/api/auth.js'
	import {
		getEnterInfo,
		preApplyMerchant
	} from '@/api/businessEnterApply.js'
	const merchantCode = ref('A6RC26')
	const linkapply = () =>  {
		uni.navigateTo({
			// url:`/applyPages/bussinessApply/bussinessAgreement?code=${merchantCode.value}`
			url:`/applyPages/bussinessApply/invitePage?code=${merchantCode.value}`
			// url:'/applyPages/bussinessApply/applyResult/applyResult?state=2'
			// url:`/applyPages/bussinessApply/bussinessAgreement?code=${merchantCode.value}`
		})
	}
	const userStore = useUserStore()

	const navBar = ref(null)

	const goBack = () => uni.navigateBack()
	const joinPopRef = ref()
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value?.height || 0)
		return navigationBarHeight
	})
	// 登录信息
	const codeTime = ref(null)
	const codeFn = ref(null)
	const mobile = ref('')
	const userPass = ref('')
	const smsCode = ref('')
	const loginType = ref('password')
	// 获取短信验证码
	const getCode = async () => {
		if(!mobile.value){
			uni.showToast({
				icon: 'none',
				title: '请输入手机号'
			})
			return
		}
		if(codeTime.value>0){
			return
		}
		uni.showLoading()
		let result = await sendSms({mobile:mobile.value,type:1})
		if(result){
			uni.showToast({
				icon: 'none',
				title: '短信已发送，请注意查收'
			})
			codeTime.value = 60
			codeFn.value = setInterval(() => {
				if(codeTime.value<=0){
					clearInterval(codeFn.value)
					codeFn.value = null
					codeTime.value = null
				}else{
					codeTime.value = codeTime.value -1
				}
			}, 1000)
		}
		uni.hideLoading()
	}
	// 切换登录形式
	const changeType = (type) => {
		mobile.value = ''
		userPass.value = ''
		smsCode.value = ''
		if(codeFn.value){
			clearInterval(codeFn.value)
			codeFn.value = null
		}
		codeTime.value = null
		loginType.value = type
	}
	// 登录提交
	const submit = async () => {
		if(!mobile.value){
			uni.showToast({
				icon: 'none',
				title: loginType.value=='code'?'请输入手机号':'请输入用户名'
			})
			return
		}
		if(loginType.value=='password' && !userPass.value){
			uni.showToast({
				icon: 'none',
				title: '请输入密码'
			})
			return
		}
		if(loginType.value=='code' && !smsCode.value){
			uni.showToast({
				icon: 'none',
				title: '请输入验证码'
			})
			return
		}
		uni.showLoading()
		if(loginType.value == 'password'){
			let result = await loginApi({mobile:mobile.value,userPass:userPass.value})
			if(result.token){
				const token = uni.setStorageSync('token',result.token)
				userStore.getUserInfo()
				uni.reLaunch({
					url:'/homePages/pages/home/home'
				})
			}
		}else{
			let result = await loginBySmsCode({mobile:mobile.value,smsCode:smsCode.value})
			if(codeFn.value){
				clearInterval(codeFn.value)
			}
			if(result.token){
				const token = uni.setStorageSync('token',result.token)
				userStore.getUserInfo()
				uni.reLaunch({
					url:'/homePages/pages/home/home'
				})
			}
		}
		uni.hideLoading()
	}
	let openId = ref('')
	const getMerInfo = async (stateResult) => {
		let result = await getEnterInfo({
			openid: openId.value
		})
		if (result) {
			userStore.setMerchantInfo(result)
			if (result.auditState == 1 || result.auditState == 3 || result.auditState == 4) {
				uni.redirectTo({
					url: '/applyPages/bussinessApply/applyResult/applyResult'
				})
			} else {
				if(userStore.$state.merchantInfo.merchantState && userStore.$state.merchantInfo.popState){
					joinPopRef.value.showPop(true)
				}
				
				// linkPages(result)
			}
		} else {
			// linkPages()
		}
	}
	const getOpenId = async () => {
		const res = await uni.login({
			provider: 'weixin'
		})
		if (res.code) {
			const result = await authCodeApi((res.code))
			if (result.openId) {
				// 已注册，直接跳转到首页
				// token.value = result.token
				// userStore.setToken(result.token)
				openId.value = result.openId
				uni.setStorageSync('openId', result.openId)
				getMerInfo()
			} else {
				// 未注册
				// openId.value = result.openId
	
			}
			// if(redirect.value == 'bussinessAgreement'){
			// 	let params = code.value?`?code=${code.value}`:``
			// 	uni.redirectTo({
			// 		url: `/applyPages/bussinessApply/bussinessAgreement${params}`
			// 	})
			// }
		}
	}
	onBeforeUnmount(() => {
		if(codeFn.value){
			clearInterval(codeFn.value)
		}
	})
	onMounted(() => {
		getOpenId()
		const token = uni.getStorageSync('token')
		if (userStore.$state.userInfo) {
			// userStore.getUserInfo()
			uni.reLaunch({
				url: '/homePages/pages/home/home'
			})
		}
		// console.log(userStore.$state,'userStore.$state.merchantInfo')
		
	})
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;
		width: 100vw;
	}
	.page-bg {
		z-index: 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-image: radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);
		background-size: 396px 396px;
		background-repeat: no-repeat;
		filter: blur(50px);
	}

	.container {
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logo {
		width: 56px;
		height: 56px;
		margin-top: 32px;
	}

	.title {
		margin-top: 20px;
		color: #333;
		text-align: center;
		font-family: PingFang SC;
		font-size: 16px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	// .space {
	// 	max-height: 190px;
	// 	flex: 1;
	// 	height: 0;
	// 	width: 100%;
	// }

	.footer {
		margin: 0 16px;
		color: #000;
		text-align: center;
		font-family: PingFang SC;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.radio {
		// transform: scale(0.66);
		width: 13.3px;
		height: 13.3px;
	}

	.link {
		color: $uni-primary;
		font-family: PingFang SC;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.quick-login-btn {
		width: calc(100% - 40px);
		margin: 10px auto 27px auto;
		height: 46px;
		line-height: 46px;
		background-color: $uni-primary;
		border-radius: 8px;
		color: #FFF;
		font-family: PingFang SC;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
	}

	.no-login-btn {
		margin: 20px 0;
		height: 38px;
		line-height: 38px;
		border-radius: 20px;
		border: 1px solid rgba(51, 51, 51, 0.60);
		color: rgba(51, 51, 51, 0.60);
		font-family: PingFang SC;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
	}
	// 账号登录
	.login-page{
		position: relative;
		z-index: 2;
		box-shadow: 0px 2px 10px 0px #3900004D;
		background-color: #ffffff;
		box-sizing: border-box;
		width: calc(100% - 40px);
		margin: 40px auto;
		border-radius: 10px;
		padding-bottom: 20px;
		.tab-dec{
			width: 50%;
			height: 52px;
			line-height: 52px;
			text-align: center;
			position: relative;
			color:#333333;
			&.active{
				color: #FA4543;

			}
			.img-left-tab{
				position: absolute;
				z-index: 1;
				left: 0;
				top: -4px;
				width: 100%;
			}
			.img-right-tab{
				position: absolute;
				z-index: 1;
				right: 0;
				top: -4px;
				width: 100%;
			}
		}
		.login-dec-page{
			box-sizing: border-box;
			padding: 20px;
		}
		.tab-name{
			background: #F5F5F5;
			font-size: 12px;
			height: 48px;
			line-height: 48px;
			box-sizing: border-box;
			padding: 0px 20px;
			margin-bottom: 20px;
			border-radius: 8px;
		}
		.code-w{
			background: #F5F5F5;
			width: 55%;
			font-size: 12px;
			height: 48px;
			line-height: 48px;
			box-sizing: border-box;
			padding: 0px 20px;
			border-radius: 8px;
			margin-bottom: 20px;
		}
		.get-code-btn{
			width: 40%;
			background: #00AEFF;
			height: 48px;
			line-height: 48px;
			margin-bottom: 20px;
			font-size: 14px;
			margin-right: 0;
			&.unactive {
				background: #0ac6ff!important;
			}
		}
	}
</style>